//import 导入 意为 '导入 模块儿 从 react 模块儿导入'
import React,{ Component } from 'react';
import {
  AppRegistry, // 注册APP入口
  StyleSheet, //样式表组件
  Text, //文字组件,它里面只能放文字 类似于 span 标签
  View //结构组件,它类似于 div 标签
} from 'react-native';

//创建一个 MyApp 组件
class MyApp extends Component{
    // 事件
    aa(){
       alert('工欲善其事')
    }



   render(){
     return(
         //Text 组件,专门负责在里面写入文字
         //加多个样式用数组的方式{[],[]}
        <View>
          <View>
         <Text style={styles.color}>我失骄杨君失柳</Text>
         <Text style={styles.color}>我失骄杨君失柳</Text>
         </View>

          <View style={styles.wp}>
              <View style={styles.nwp}>
                 <Text style={styles.txt}>精</Text>
                 <Text style={styles.txt}>忠</Text>
              </View>
              <View style={styles.nwp}>
                <Text style={styles.txt}>报</Text>
                <Text style={styles.txt} onPress={this.aa}>国</Text>
              </View>
          </View>


        <View style={styles.wp}>
          <View style={styles.nwp}>
            <Text style={[styles.txt],[styles.top1]}>1</Text>
            <Text style={styles.top2}>2</Text>
            <Text style={styles.top3}>3</Text>
          </View>
         <View style={styles.nwp}>
            <Text style={styles.bottom4}>4</Text>
            <Text style={styles.bottom5}>5</Text>
         </View>
       </View>

       <TxtView/>
      </View>
     )
  }
}

//创建一个自定义组件
//numberOfLines={2} 文字超过两行会用...显示 ;;不能写在View上;
class TxtView extends Component{
    render(){
        return(
            <View>
                <Text numberOfLines={2}>葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯葡萄美酒夜光杯</Text>
            </View>
        )
    };
};





//设置样式
const styles = StyleSheet.create({
    color:{
        fontSize:20,
        marginTop:40,
        color:'#f00'
    },
//  精忠报国 添加样式
//  外层
    wp:{
       backgroundColor:'#F00',
       height:200,
    },

    nwp:{
       flex:1,
       flexDirection:'row'
    },

    txt:{
       flex:1,
       fontSize:50,
       color:'#ff0',
       textAlign:'center',
       lineHeight:100,
       height:100
    },
//  布局
    top1:{
        flex:1,
        fontSize:50,
        color:'#ff0',
        textAlign:'center',
        backgroundColor:'pink',
        lineHeight:100,
    },
    top2:{
        flex:1,
        fontSize:50,
        color:'#ff0',
        textAlign:'center',
        backgroundColor:'gray',
        lineHeight:100,
    },
    top3:{
        flex:1,
        fontSize:50,
        color:'#ff0',
        textAlign:'center',
        backgroundColor:'purple',
        lineHeight:100,
    },
    bottom4:{
        flex:2,
        fontSize:50,
        color:'#ff0',
        textAlign:'center',
        backgroundColor:'cyan',
        lineHeight:100,
    },
    bottom5:{
        flex:1,
        fontSize:50,
        color:'#ff0',
        textAlign:'center',
        backgroundColor:'orange',
        lineHeight:100,
    },
});


//注册app,其中 'myapp'是指工程名,'MyApp'是创建的组件名
AppRegistry.registerComponent('myapp', () => MyApp);